<template>
  <!-- 这里是咨询开单 -->
  <div class="main-content-container">
    <div ref="search" class="app-search">
      <el-form label-width="auto" class="top">
        <el-row type="flex">
          <el-col :span="12" class="searchs-y">
            <!-- <el-form ref="searchFormRef" label-width="80px" :inline="true"> -->
            <el-form-item>
              <el-input v-model="custQuery" placeholder="姓名、手机号、会员号" clearable @change="handleChange">
                <el-button slot="append" icon="el-icon-search" @click="handleChange" />
              </el-input>
            </el-form-item>
            <!-- </el-form> -->
          </el-col>
          <!-- <el-col :span="2" :offset="14" class="buttons">
            <el-button type="primary" @click="addCustomer">+ 增加顾客</el-button>
          </el-col> -->
        </el-row>
        <el-row class="float-l">
          <!-- <el-col :span="14"> -->
          <Search :data="selections" :attribute="'createdTime'" @change="handleTypeChange" @dateChange="handleDateChange" />
          <!-- </el-col> -->
          <!-- <el-col :span="4"> -->
          <el-form-item>
            <dictionary-selector placeholder="请选择分诊类型" class="el-select-y" code="swan_front_jzlx" :value.sync="treatType" @change="handle(treatType)" />
          </el-form-item>
          <!-- </el-col> -->
        </el-row>
        <el-row class="mounteds">
          <!-- <Search :data="tabsName" :values="status" @change="handleTypeChange" /> -->
          <Tabs v-model="status" :data="tabsName" @change="searchChange" />
        </el-row>
      </el-form>
    </div>
    <div class="box-show" :style="'height:'+ (innerHeight + 86) + 'px'">
      <el-table v-loading="loadling" :data="list1" style="width: 100%" border :row-class-name="tableColor" :height="innerHeight">
        <el-table-column prop="customerName" label="顾客" :show-overflow-tooltip="true" />
        <el-table-column prop="customerSex" label="性别" :show-overflow-tooltip="true" />
        <el-table-column prop="treatType" label="分诊类型" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{
              dictFormatter("swan_front_jzlx", scope.row.treatType)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          :prop="'treatType'==='复查'?'intentCaseName':'adviserType'"
          label="咨询分类/项目"
          :show-overflow-tooltip="true"
          min-width="100px"
        />
        <el-table-column prop="arrangeType" label="排台方式" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{
              dictFormatter("swan_front_ptlx", scope.row.arrangeType)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="adviserName" label="咨询师" :show-overflow-tooltip="true" />
        <!-- <el-table-column prop="faceDoctorName" label="主治医生" /> -->
        <el-table-column prop="triageTime" label="分诊时间" :show-overflow-tooltip="true">
          <template slot-scope="{ row }">
            <span>{{ parseTime(row.triageTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="accepterName" label="分诊人" :show-overflow-tooltip="true" />
        <!-- <el-table-column v-if="status==='未接待'" prop="waitTime" label="已等时间" /> -->
        <el-table-column v-if="status!=='未接待'" prop="status" label="状态" :show-overflow-tooltip="true" />
        <el-table-column v-if="status!=='未接待'" prop="advisoryResult" label="咨询结果" :show-overflow-tooltip="true" />
        <el-table-column v-if="status!=='未接待'" prop="drawSituation" label="开单情况" :show-overflow-tooltip="true" />
        <el-table-column v-if="status!=='未接待'" prop="returnToFile" label="咨询归档" :show-overflow-tooltip="true" />
        <el-table-column v-if="status!=='未接待'" prop="receiveTime" label="接待时间" :show-overflow-tooltip="true">
        <!-- <template slot-scope="{ row }">
          <span>{{ parseTime(row.receiveTime) }}</span>
        </template> -->
        </el-table-column>
        <el-table-column v-if="search.status !== '已取消'||status==='已取消'" label="操作" width="200">
          <template slot-scope="{ row }">
            <el-button v-if="row.status === '未接待'" type="text" size="small" @click="$refs.newAdd.advisory(row, row.id)">咨询登记</el-button>
            <el-button v-if="row.status !== '未接待' && row.returnToFile !== '已归档'" type="text" size="small" @click="$refs.newAdd.advisory(row, row.id, row.advisoryId)">继续咨询</el-button>
            <!-- <el-button v-if="row.status === '未接待'" type="text" size="small" plain @click="reassignment(row)">改派</el-button> -->
            <el-button v-if="row.returnToFile === '已归档'" type="text" size="small" @click="$refs.advisoryRecord.loadDetails(row, row.advisoryId)">咨询记录</el-button>
            <el-button type="text" size="small" @click="Billing(row)">开单</el-button>
            <el-button type="text" size="small" @click="seeRecharge(true, row.customerId)">充值</el-button>
            <el-button v-if="row.status === '未接待'" type="text" size="small" @click="handleFinish(row.id)">完成</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :page-num="queryParams.page" :page-size="queryParams.pageSize" :on-change="handlePaginationChange" :total="total" />
    </div>
    <NewAdd ref="newAdd" :modal-visible-data="modalVisibleData" @close="modalVisible = false" @success="getList()" />
    <Billing v-if="billing" ref="billing" :bill-type="'咨询开单'" :billing-data="billingData" @success="getList()" />
    <Record ref="advisoryRecord" :id-list="idList" />
    <Dialog ref="subscribeRefs" :visible.sync="visibles" :title="title" :flag="flag" />
    <Recharg :visible.sync="chargDialogVisible" :ids="ids" @cancels="(chargDialogVisible = false), (ids = '')" />
    <Customer :title="title" :text-btn="textBtn" :visible.sync="customerVisible" :flag="true" :is-info="true" :is-modify="true" @handleClose="handleClose" />
  </div>
</template>
<script>
window.onbeforeunload = event => {
  window.scrollTo(0, 0); // 每次刷新，滚动条在页面最上面
};
import NewAdd from "./newAdd"; // 新增咨询
import Billing from "./billing"; // 开单
import Recharg from "../task/recharge";
import { DictionarySelector } from "@rabbit.do/rabbit";
import Search from "@/components/Search";
import { selections } from "@/config";
import Tabs from "@/components/SearchSelection";
import Record from "../task/record.vue";
import Dialog from "../../reception/triage/management/dialog.vue";
import Customer from "../../customer/customers/dialog";
import { tableColor, labelHeigh } from '@/utils/common.js';
export default {
  components: {
    NewAdd,
    Billing,
    Search,
    Recharg,
    DictionarySelector,
    Tabs,
    Record,
    Dialog,
    Customer,
  },
  data() {
    return {
      loadling: false,
      url: "",
      custQuery: "",
      selections,
      tableColor,
      innerHeight: null,
      id: "",
      ids: "",
      treatType: "请选择分诊类型",
      recordId: "",
      status: "未接待",
      title: "修改分诊",
      textBtn: "",
      visible: false,
      visibles: false,
      customerVisible: false,
      flag: false,
      chargDialogVisible: false,
      queryParams: {
        page: 1,
        pageSize: this.$store.state.commonsettings.maxPageSize,
      },
      total: 0,
      list1: [{}],
      idList: [], // 记录当前数据的id集合
      input3: "",
      tabsName: [
        { id: "全部", name: "全部" },
        { id: "未接待", name: "未接待" },
        { id: "已接待", name: "已接待" },
        { id: "已取消", name: "已取消" },
      ],
      search: {
        status: "未接待",
        timeType: "today",
        createdTime:
          new Date().getFullYear() +
          "-" +
          (new Date().getMonth() + 1) +
          "-" +
          new Date().getDate() +
          " 00:00:00" +
          "_" +
          new Date().getFullYear() +
          "-" +
          (new Date().getMonth() + 1) +
          "-" +
          new Date().getDate() +
          " 23:59:59",
      },
      values: 1, // 控制表格是待咨询还是已咨询的
      modalVisible: false,
      modalVisibleData: {},
      modalNumber: 1,
      billing: false,
      billingData: {},
    };
  },
  created() {
    if (this.$route.query.isPopup) {
      this.Billing();
      this.$router.push({
        query: {},
      });
    }
  },
  mounted() {
    this.getList();
    this.innerHeight = labelHeigh(this.$refs.search);
  },
  methods: {
    async handleFinish(id) { // 完成
      const confirmResult = await this.$confirm('请确认是否完成?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err);
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消');
      } else {
        this.$api['doctor/consulting/finishAdvisory']({ id }).then((res) => {
          if (res.code !== 200) return;
          return this.$message.success('已更改成功');
        }
        ).finally(() => {
          this.getList();
        });
      }
    },
    async seeRecharge(bool, id) {
      this.chargDialogVisible = true;
      if (id) {
        // 点击充值
        this.ids = id;
      }
    },
    eliminate() {
      this.custQuery = "";
      this.queryParams.page = 1;
      this.getList();
    },
    handleChange() {
      this.queryParams.page = 1;
      this.getList();
    },
    reassignment(row) {
      // 改派
      this.visibles = true;
      this.$nextTick(() => {
        const rows = JSON.parse(JSON.stringify(row));
        this.$refs.subscribeRefs.editTriageBtn(rows);
      });
    },
    seeDetails(bool, id) {
      // 点击咨询记录
      if (id) {
        this.recordId = id;
      }
      this.visible = bool;
    },
    clearNoNum(obj) {
      this.input3 = this.input3.replace(/[^\d.]/g, ""); // 清除“数字”和“.”以外的字符
      this.input3 = this.input3.replace(/^\./g, ""); // 验证第一个字符是数字而不是.
      this.input3 = this.input3.replace(/\.{2,}/g, "."); // 只保留第一个. 清除多余的
      this.input3 = this.input3
        .replace(".", "$#$")
        .replace(/\./g, "")
        .replace("$#$", ".");
      this.input3 = this.input3.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3"); // 只能输入两个小数
    },
    addCustomer() {
      this.title = "新增顾客";
      this.textBtn = "保存";
      this.customerVisible = true;
    },
    getList() {
      this.fetchList1("doctor/consulting/allListing");
    },
    searchChange(e) {
      // Tabs切换的方法函数
      Object.assign(this.search, { status: e === "全部" ? "" : e });
      this.getList();
    },
    handleTypeChange(val) {
      Object.assign(this.search, val);
      this.getList();
    },
    handleDateChange(val) {
      Object.assign(this.search, val);
      this.getList();
    },
    fetchList1(url) {
      // 请求列表的数据
      this.loadling = true;
      this.$api[url]({ ...this.queryParams, query: this.search, custQuery: this.custQuery }).then(
        (res) => {
          if (res.code !== 200) return;
          this.idList = [];
          this.list1 = res.data.result;
          this.total = res.data.total;
          this.modalVisible = false;
          this.list1.forEach((item) => {
            if (item.advisoryId) {
              this.idList.push(item.advisoryId);
            }
          });
          this.loadling = false;
          this.modalVisible = false;
        }
      );
    },
    handle(val) {
      if (val) {
        this.$set(this.search, "treatType", val);
      } else {
        this.$set(this.search, "treatType", "");
      }
      this.getList();
    },
    handleNewAdd(val, id) {
      // 新增咨询
      this.modalVisible = true;
      this.modalVisibleData = val;
      this.$set(this.modalVisibleData, "triageId", id);
      this.$nextTick(() => {
        this.$refs.newAdd.init();
      });
    },
    Billing(val) {
      // 点击开单
      // this.billingData = val;
      this.billingData = {
        customerId: val.customerId,
        customerName: val.customerName,
        orderPaymentStyle: "全款",
        customerPhone: val.customerPhone,
        customerCode: val.customerCode,
      };
      this.billing = true;
      this.$nextTick(() => {
        this.$refs.billing.init();
      });
    },
    handlePaginationChange(pagination) {
      // 分页
      this.queryParams = {
        page: pagination.pageNum,
        pageSize: pagination.pageSize,
      };
      this.getList();
    },
    handleClose() {
      this.customerVisible = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  color: #707070;
}

// .el-table {
//   margin: 0 0 60px;
// }
.el-button {
  color: rgb(114, 222, 236);
}
.numberOrder {
  color: #a7a7a7;
  font-size: 14px;
  span {
    color: #51abab;
  }
}
.top {
  > div {
    margin-right: 10px;
  }
  .mounteds {
    margin: 0px 0 10px;
  }
}
.spn {
  float: right;
  .inputCss {
    width: 248px;
  }
}
// .main-content-container{
//   padding: 0;
// }
</style>
